<div style="margin-left: 40px">
  <form dForm [layout]="layoutDirection" ngForm>
    <d-form-item>
      <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
      <d-form-control>
        <div>
          <input dTextInput autocomplete="off" name="userName" />
        </div>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Description</d-form-label>
      <d-form-control>
        <textarea dTextarea name="desc" maxlength="200" style="height: 80px"></textarea>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">Select</d-form-label>
      <d-form-control>
        <d-select [options]="selectOptions" name="select1" [filterKey]="'label'" [(ngModel)]="formData.selectValue"></d-select>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Multiple options</d-form-label>
      <d-form-control>
        <d-select
          name="multiSelect"
          [options]="selectOptions"
          [filterKey]="'label'"
          [isSearch]="true"
          [multiple]="true"
          [extraConfig]="{
            labelization: multipleSelect2DemoConfig.labelization
          }"
          [ngModel]="formData.multipleSelectValue"
          [size]="'sm'"
        ></d-select>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Tags</d-form-label>
      <d-form-control>
        <d-tags-input
          name="tag"
          (click)="$event.stopPropagation()"
          [displayProperty]="'label'"
          [tags]="addedLabelList"
          [placeholder]="'Tags'"
          [suggestionList]="labelList"
        >
        </d-tags-input>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Radio</d-form-label>
      <d-form-control>
        <d-radio-group name="schedule" [direction]="'row'" [(ngModel)]="formData.radioValue">
          <d-radio *ngFor="let option of radioOptions" [name]="'schedule'" [value]="option.id">
            {{ option.label }}
          </d-radio>
        </d-radio-group>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Switch</d-form-label>
      <d-form-control>
        <d-toggle name="anonymous" [(ngModel)]="formData.toggleValue"></d-toggle>
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>Execution day</d-form-label>
      <d-form-control>
        <d-checkbox-group
          [options]="checkboxOptions"
          [name]="'planExerciseDate'"
          [direction]="'row'"
          [filterKey]="'label'"
          [isShowTitle]="true"
        ></d-checkbox-group>
      </d-form-control>
    </d-form-item>
    <d-form-operation>
      <d-button bsStyle="primary" class="mr-element-spacing" circled="true" style="margin-right: 4px">Submit</d-button>
      <d-button bsStyle="common" circled="true">Cancel</d-button>
    </d-form-operation>
  </form>
</div>
